<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- 写路由链接 不会使用a标签  使用router-link组件 -->
    <nav>
      <!-- 组件默认解析的是a标签  to属性跳转的地址，不需要带上# -->
      <router-link to="/">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/friend">朋友</router-link>
    </nav>
    <!-- 渲染路由对应的组件 router-view承载路由对应的组件的-->
    <router-view></router-view>
  </div>
  <script src="./vue.js"></script>
  <script src="./vue-router.min.js"></script>
  <script>
    // 准备三个组件（组件配置对象）
    const Home = { template: `<div>发现音乐网页内容</div>` }
    const My = { template: `<div>我的音乐网页内容</div>` }
    const Friend = { template: `<div>朋友网页内容</div>` }

    // 路由规则（按照vue-router进行定义）
    const routes = [
      {path: '/', component: Home},
      {path: '/my', component: My},
      {path: '/friend', component: Friend}
    ]

    // 初始化vue-router且使用刚定义的路由规则
    const router = new VueRouter({
      // 初始化路由的配置对象
      // 有以一个配置项 routes 定义路由规则
      routes
    })

    new Vue({
      el: '#app',
      // vue提供了一个配置选项，router选项，是用来挂载路由实例的
      // 只有挂载了 router 实例 才可使用路由的功能
      router
    })
  </script>
</body>
</html>